<template>
	<view :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top />
		<!-- #endif -->
		<view class="main-section top">
			<!--地址容器-->
			<view class="address-section" v-if="addressList.length > 0">
				<view class="address-item" v-for="(item,index) in addressList" :key="index">
					<view class="person-box" @click="backBuy()">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
					</view>
					<view class="address-box" @click="backBuy()">
						<text class="pos-province">{{item.pos_province}}</text>
						<text class="pos-city">{{item.pos_city}}</text>
						<text class="pos_district">{{item.pos_district}}</text>
						<text class="address">{{item.address}}</text>
					</view>
					<view class="address-action">
						<view class="default" v-if="item.first == 1">
							<button type="default" size="mini" class="set-default-btn" disabled="true" >默认地址</button>
						</view>
						<view class="default" v-else>
							<button type="default" size="mini" class="set-default-btn" @click="setDefault(item.id)">设为默认</button>
						</view>
						<view class="edit">
							<button type="default" size="mini" class="edit-btn" @click="editAddress(item.id)">编辑</button>
						</view>
					</view>
				</view>
			</view>
			<view class="address-empty" v-else>
				<text>空空如也！</text>
			</view>
		</view>
		<!--新增收货地址-->
		<view class="address-add">
			<button type="default" class="add-btn" hover-class="add-btn-hover" @click="editAddress()"> + 新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default {
		components: {
		},
		data() {
			return {
				loading: true, //加载中
				addressList: [],
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.getAddressList()
			Promise.all([this.getAddressList()]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
		},
		onShow(){
			this.getAddressList()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取收货地址列表
			 */
			getAddressList: function(){
				let that = this
				let params = this.urlParams
				return new Promise((resolve, reject) => {
					let data = {}
						data.action = 'lists'
					//获取首页数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/address'
						//#endif
						//#ifdef H5
						url = 'entry/site/address'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.addressList = res.data.data
							}
							resolve(res.data)
						}
					})
				})
				
			},
			/**
			 * 新增收货地址
			 */
			editAddress: function(id){
				id = id || 0
				let urlParams = 'id='+id
				let url = 'edit?' + urlParams
				console.log(url)
				
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 设置为默认地址
			 * @param {Object} id
			 */
			setDefault: function(id){
				let that = this
				id = id || 0
				let data = {}
					data.id = id
					data.action = 'set_default'
				//获取首页数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/address'
					//#endif
					//#ifdef H5
					url = 'entry/site/address'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res.data)
							that.getAddressList()
						}
					}
				})
			},
			
			/**
			 * 返回购买页（上一页）
			 */
			backBuy() {
				console.log('back')
				uni.navigateBack()
			}
			
		}
	}
</script>

<style lang="scss">
	.address-section {
		
		.address-item {
			margin: 20rpx;
			padding: 20rpx;
			border-bottom: 1rpx solid #f8f8f8;
			.person-box {
				.name {
					font-size: 28rpx;
					color: #000;
					font-weight: 700;
				}
				.phone {
					color: #666;
					font-size: 26rpx;
					padding-left: 20rpx;
				}
			}
			.address-box {
				font-size: 26rpx;
				color: #999;
				.pos-province {
					margin-right: 10rpx
				}
				.pos-city {
					margin-right: 10rpx
				}
				.pos_district {
					margin-right: 10rpx
				}
				.address {
					
				}
			}
			.address-action {
				display: flex;
				padding: 10rpx 0;
				.default {
					flex: 1;
					.set-default {
						
					}
				}
				.edit {
					width: 140rpx;
					.edit-btn {
						width: 140rpx;
					}
				}
			}
			
		}
	}
	
	.address-empty {
		min-height: 180rpx;
		line-height: 180rpx;
		font-size: 26rpx;
		text-align: center;
		color: #999;
	}
	
	.address-add {
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		.add-btn {
			display: block;
			border-radius: 10rpx;
			color: #fff;
		}
		.add-btn-hover {
			
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.address-add {
			.add-btn {
				background-color: $Blue;
			}
			.add-btn-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.address-add {
			.add-btn {
				background-color: $Green;
			}
			.add-btn-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.address-add {
			.add-btn {
				background-color: $LightRed;
			}
			.add-btn-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.address-add {
			.add-btn {
				background-color: $Orange;
			}
			.add-btn-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.address-add {
			.add-btn {
				background-color: $LightPink;
			}
			.add-btn-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.address-add {
			.add-btn {
				background-color: $Magenta;
			}
			.add-btn-hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
